<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Venn.js Styling examples</title>
<style>
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
}
</style>
</head>

<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="../venn.js"></script>
    <script src="./medical.jsonp"></script>

    <div id="rings">
        <script>
            var chart = venn.VennDiagram()
                             .width(500)
                             .height(500)
                             .fontSize("24px");

            sets.sort(function(a,b) { return a.size - b.size; })
            d3.select("#rings").datum(sets).call(chart);
            var colours = ['black', 'red', 'blue', 'green'];

            d3.selectAll("#rings .venn-circle path")
                .style("fill-opacity", 0)
                .style("stroke-width", 10)
                .style("stroke-opacity", .5)
                .style("fill", function(d,i) { return colours[i]; })
                .style("stroke", function(d,i) { return colours[i]; });

            d3.selectAll("#rings .venn-circle text")
                .style("fill", function(d,i) { return colours[i]})
                .style("font-weight", "100");

            d3.selectAll("#rings .venn-circle")
                .on("mouseover", function(d, i) {
                    var node = d3.select(this).transition();
                    node.select("path").style("fill-opacity", .2);
                    node.select("text").style("font-weight", "100")
                                       .style("font-size", "36px");
                })
                .on("mouseout", function(d, i) {
                    var node = d3.select(this).transition();
                    node.select("path").style("fill-opacity", 0);
                    node.select("text").style("font-weight", "100")
                                       .style("font-size", "24px");
                });
        </script>
    </div>
</body>
</html>
